<template>
	<view class="cost-detail" :style="{'margin-bottom': bottomHeight+'rpx'}">
		<view class="cost-con">
			<view class="title">费用明细</view>
			<view class="const-list">
				<view class="dt">
					<view>{{suit.productname}}</view>
				</view>
				<block >
					<view  class="dd">
						<view>{{suit.suitname}}</view>
						<view>{{suit.price}}X{{suit.num?suit.num:1}}</view>
					</view>

				</block>
			</view>

		</view>
	</view>
</template>

<script>
	/**
	 * 费用明细弹窗
	 * @property {Number} bottomHeight 弹窗与底部间距（用于有底部悬浮栏的页面）
	 * @property {Boolean} titleColor 标题是否添加颜色
	 * @property {Boolean} payType 支付方式分别支付金额显示
	 * @property {Boolean} paySum 支付总额显示
	 * 
	 */
	export default {
		props: {
			bottomHeight: {
				type: Number,
				default: 0
			},
			titleColor: {
				type: Boolean,
				default: false
			},
			payType: {
				type: Boolean,
				default: false
			},
			paySum: {
				type: Boolean,
				default: false
			},
			discountInfo:{
				type:Object,
				default() {
					return {}
				}
			},
			productInfo:{
				type:Object,
				default() {
					return {}
				}
			},
			priceInfo:{
				type:Object,
				default() {
					return {}
				}
			},
			suit:{
				type:Object,
				default() {
					return {}
				}
			},
			expressFee:{
				type:[Number,String],
				default:0
			},
			totalNum:{
				type: Number,
				default: 0
			},
			discountMoney:{
				type: Number,
				default: 0
			},
			storeMoney:{
				type: Number,
				default: 0
			},
			typeid:{
				type: Number,
				default: 1
			},
			memberDiscount: {
				type: Number,
				default: 0
			},
			orderInfo: {
				type: Object,
				default() {
					return {}
				}
			},
		},
		data() {
			return {
				storeMoneyPay:0
			}
		},
		watch:{
			storeMoney:{
				handler(val) {
					this.storeMoneyPay = val.toFixed(2);
				},
				immediate: true
			}
		},
		methods: {
			// 金额保留两位
			decimalMoney(val){
				return parseFloat(val).toFixed(2);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.module-block{
		padding: 0 25rpx;
		margin-bottom: 20rpx;
	}
	.cost-detail{
		font-family: "Arial";
		.cost-con{
			max-height: 800rpx;
			padding: 0 25rpx;
			background-color: #fff;
			overflow-y: auto;
			font-size: $uni-font-size-base;
		}
		.title{
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: #000;
			border-bottom: 1rpx solid $uni-border-color;
		}
		.discounts-list,.pay-type{
			border-top: 1rpx solid $uni-border-color;
		}
		.const-list,.discounts-list{
			padding: 23rpx 0 14rpx;
		}
		.dt,.dd{
			@extend .justifyspace;
		}
		.dt{
			margin-bottom: 17rpx;
			&.color{
				color: $uni-color-primary;
			}
		}
		.dd,.pay-type{
			color: $uni-text-color-grey;
		}
		.dd{
			line-height: 1.833;
			font-size: $uni-font-size-sm;
		}
		.pay-type{
			height: 83rpx;
			line-height: 83rpx;
			text-align: center;
		}
	}
	.paySum{
		padding: 30rpx 0;
		border-top: 1rpx solid $uni-border-color;
		.price{
			font-size: 36rpx;
			font-weight: bold;
		}
		.symbol{
			font-weight: 400;
			font-size: $uni-font-size-mini;
		}
	}
	.total-payment{
		border-top: 1px #eeeeee solid;
		padding-top: 10px;
		.payment-title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.payment-price{
			font-size: 26rpx;
			.price-size{
				display: inline-block;
				font-size: 40rpx;
				font-weight: bold;
			}
		}
	}
</style>
